import React from 'react'
import { Table, Button } from 'antd'
import { DeleteOutlined } from '@ant-design/icons';


// 因为待发布、已发布、已下线三个页面的页面布局都是差不多的，所以就可以把它们封装在一个组件中进行复用，避免代码沉余；   思路：就是父组件中引入封装的复用组件，数据dataSouce通过props当成参数传给子组件，子组件通过props.dataSouce来接收；渲染的内容就是根据当前用户中待发布、已发布、已下线对应的状态来进行渲染

// 这里按钮就是把它当成一个属性，然后再共用组件里面用props.button去接收


export default function NewsPublish(props) {

    const columns = [
        {
            title: '新闻标题',
            dataIndex: 'title',
            key: 'name',  // 可写可不写
            render: (title, Item) => <a href={`#/news-manage/preview/${Item.id}`}>{title}</a>
        },
        {
            title: '作者',
            dataIndex: 'author',
        },
        {
            title: '新闻分类',
            dataIndex: 'category',
            render: (category) => {
                return <div>{category.title}</div>
            }
        },
        {
            title: '操作',
            render: (Item) => <div>
                {props.button(Item.id)}
            </div>
        },
    ];


    return (
        <div>
            <Table
                columns={columns}
                dataSource={props.dataSource}
                pagination={{
                    pageSize: 5
                }}
                rowKey={Item => Item.id}
            />
        </div>
    )
}


